*{
    margin: 0;;
    padding:0;
    list-style: none;
    box-sizing: border-box;
}

.wrap{
    width:1000px;
    margin: auto;
}


.nav{
    width:1000px;
    margin: auto;
}
.nav>li{
    width:200px;
    height:80px;
    line-height: 80px;
    text-align: center;
    float: left;
    border: 1px solid #ccc;
    position: relative;
}

/* .nav>li:hover{
    background: red;
}

.nav>li:hover ol{
   display: block;
} */


ol{
    position: absolute;
    top:100%;
    display: none;
}

ol>li{
    width:300px;
    height:80px;
    line-height: 80px;
    text-align: center;
    background: #555;
    left:-50px;
    position: relative;
}

/* ol>li:hover{
    background: #ccc;
    color:#fff;
} */
/* 
ol>li:hover .list{
    display: block;
} */

.list{
    position: absolute;
    left:100%;  
    top:0;
    display: none;
}

.list>li{
    width:200px;
    height:80px;
    text-align: center;
    line-height:80px;
    background: #ccc;
}

